<template>
  <!-- 2. 准备具备宽高的DOM容器 -->
  <div class="chart" ref="chartRef"></div>
</template>

<script lang="ts" setup>
// 1. 引入echarts
// import * as echarts from "echarts";
// import type { EChartsOption } from "echarts";
// 1. 按需引入echarts
import echarts from "@/utils/echarts";
import type { ECOption } from "@/utils/echarts";
import { ref, onMounted, watch } from "vue";
// 按需引入lodash
import merge from "lodash/merge";
import cloneDeep from "lodash/cloneDeep";
import commonOption from "./commonOption";

const chartRef = ref();
// onMounted(() => {
//   // 3. 初始化echarts实例
//   const myEcharts = echarts.init(chartRef.value);

//   // 5. 渲染图表
//   myEcharts.setOption(props.option);
// });

const props = defineProps<{
  option: ECOption;
}>();

let myEcharts: echarts.ECharts;

onMounted(() => {
  myEcharts = echarts.init(chartRef.value);
  const option = merge(cloneDeep(commonOption), props.option);
  myEcharts.setOption(option);
});

watch(props.option, () => {
  // 5. 渲染图表
  const option = merge(cloneDeep(commonOption), props.option);
  myEcharts.setOption(option);
});

defineOptions({
  name: "Chart",
});
</script>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 100%;
}
</style>
